<template>
  <div id="app">
    <!-- 顶部搜索栏 -->
    <div class="topSerch">
      <div class="topSerch_one">
        <!-- 小段内容 -->
        <div class="one_sap">
          <h4>
            <strong>
              <i class="icon iconfont icon-pdf" style="font-size:20px;"></i> SAP职位大全
            </strong>
          </h4>
        </div>
        <!-- 搜索栏 -->
        <div class="one_serch">
          <!-- 职位类型 -->
          <div class="col-sm-2" style="padding:5px 5px 5px 0px;margin:0px;">
            <div class="input-group">
              <span class="input-group-addon">职位类型</span>
              <select class="form-control form-control1">
                <option value="">全部</option>
                <option selected="selected" value="全职">全职</option>
                <option value="Free">自由顾问</option>
              </select>
            </div>
          </div>

          <!--  -->
          <div class="col-sm-2" style="padding:5px;margin:0px;">
            <div class="input-group">
              <span class="input-group-addon">工作地点</span>
              <input name="worklocation" type="text" maxlength="10" class="form-control area" value />
            </div>
          </div>
          <!--  -->
          <div class="col-sm-4" style="padding:5px;margin:0px;">
            <div class="input-group">
              <span class="input-group-addon">薪资范围</span>
              <select
                class="form-control"
                data-val="true"
                data-val-number="字段 Int32 必须是一个数字。"
                data-val-required="Int32 字段是必需的。"
                id="rate"
                name="rate"
              >
                <option selected="selected" value="0">全部</option>
                <option value="1">全职:1万/月以内 + Free:1000/天以内</option>
                <option value="2">全职:1万~2万/月 + Free:1000-1500/天</option>
                <option value="3">全职:2万~3万/月 + Free:1500-2000/天</option>
                <option value="4">全职:3万~5万/月 + Free:2000-2500/天</option>
                <option value="5">全职:5万以上/月 + Free:2500/天以上</option>
              </select>
            </div>
          </div>
          <!--  -->
          <div class="col-sm-3" style="padding:5px;margin:0px;">
            <div class="input-group">
              <span class="input-group-addon">职位名称</span>
              <input name="title" type="text" maxlength="20" class="form-control" value />
            </div>
          </div>
          <div class="col-sm-1" style="padding:5px;margin:0px;">
            <button
              type="submit"
              class="btn btn-default jiansuo"
              style="backgroundColor: #ffffff"
              @click="serch"
            >检索</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 中心内容 -->
    <div class="container">
      <div v-for="item in list" class="lielie panel panel-default" :key="item.id">
        <!-- 上部分 -->
        <div class="lielietop">
          <!-- text-overflow:ellipsis   多行文字溢出 实现 ...     white-space:nowrap 文本不可换行 -->
          <span
            class="toptitle"
            style="font-weight: bold; white-space:nowrap;text-overflow:ellipsis font-family: Microsoft YaHei; "
          >
            <!-- 工作名称 -->
            <strong>{{item.title}}</strong>
          </span>
          <br />
          <!-- 招聘有效期 -->
          <span class="toptime">{{item.validity}}</span>
          <br />
          <!-- 全职或自由 -->
          <span
            :class="item.assort == 'Free' ? 'label label-primary green':'label label-primary red'"
          >{{item.assort}}</span>
          <!-- 工作地点 -->
          <span
            class="label label-default addressleble label-xs topaddress"
            style="margin:0px 5px 0px 5px"
          >{{item.area}}</span>
          <!-- 工作薪资 -->
          <span class="label label-danger xinzimoney label-xs">{{item.wages}}</span>
        </div>
        <!-- 下部分 -->
        <div class="lieliebottom">
          <!-- elementui 组件  隐藏框 -->
          <el-popover
            placement="left"
            width="550"
            height="500"
            trigger="hover"
            style=" overflow: hidden;text-overflow:ellipsis"
          >
            <!-- 显示title -->
            <div
              class="titlediv"
              v-html="item.title"
              style="font-weight: bold; white-space:nowrap;text-overflow:ellipsis;text-overflow:ellipsis;widht:50%;font-family: Microsoft YaHei;"
            >{{item.title}}</div>
            <!-- 显示内容 -->

            <!-- <span style="color:red;font-size:14px;"></span> -->
            <div style="text-overflow:ellipsis" v-html="item.content">{{item.content}}</div>
            <!-- 隐藏框显示二维码 -->
            <div>
              <!-- <img :src="item.src == 'null' ? undefined : urlimg" alt /> -->
              <img v-if="item.src != 'null'" :src="item.src" alt />
            </div>
            <!-- 简介 -->
            <div slot="reference" v-html="item.content">{{item.content}}</div>
            <!-- 简介中的二维码 -->
            <div slot="reference" class="imgdiv">
              <!-- <img :src="item.src == 'null' ? null : urlimg" alt /> -->
              <img v-if="item.src != 'null'" :src="item.src" alt />
            </div>
          </el-popover>
        </div>
      </div>
      <!-- 分页 -->
      <div class="page">
        <nav aria-label="Page navigation">
          <ul class="pagination">
            <li>
              <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <!-- woshinibabawoshinibaba -->
            <!-- 分页按钮 -->
            <li v-for="index of pageTotal" @click="getList(index)" :key="index">
              <a href="#">{{index}}</a>
            </li>
            <li>
              <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <!-- 底部 -->
    <div
      class="bottom-dd"
      style="color:#999999; font-family: Microsoft YaHei;  text-align: center;font-size: 14px;"
    >
      本站所有电子书全部来自于互联网，欢迎大家给小编投稿+V:FICODK
      <p style="color:#999999; font-family: Microsoft YaHei; text-align: center">
        © 2018 All Rights Reserved by SAPDOC.cn. |
        <a
          href
          style="color: #e5e5e5;  font-size: 14px;"
        >沪ICP备17005776号-3</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  // 因为分页 后台每次传递一个有 12个对象的数组
  data() {
    return {
      // 分页
      pageTotal: 1,
      // 数据
      list: []
    };
  },
  methods: {
    // 发请求 分页数据
    async getList(num) {
      const { data: res } = await this.$axios.get("/recruit", {
        params: {
          pagenum: num
        }
      });
      this.list = res.data;
      this.pageTotal = Math.ceil(res.total / 12);
    },
    async serch(assort) {
      // 获取职位类型
      let lx = document.querySelector(".form-control").value;
      // console.log(lx);
      const { data: res } = await this.$axios.get("/recruit/serch", {
        params: {
          assort: lx
        }
      });
      // console.log(res);
      this.list = res.data;
    }
  },
  created: function() {
    this.getList();
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.topSerch {
  padding: 0 15px;
  width: 100%;
  height: 87px;
  border-bottom: 1px solid #e7e7e7;
}
.topSerch_one {
  width: 73%;
  height: 87px;
  background-color: rgba(33, 66, 95, 0.014);
  margin: 0 12%;
}
.one_sap {
  padding: 1px 0 0 0px;
  width: 285px;
  height: 41px;
  line-height: 41px;
}
.one_serch {
  padding: 0;
  width: 100%;
  height: 44px;
  /* background-color: bisque; */
}
.input-group {
  width: 103%;
}
.container {
  background-color: #fcf8e3;
  width: 100%;
  height: 900px;
  padding: 0 13%;
  overflow: hidden;
  position: relative;
}
.lielie {
  width: 24%;
  height: 263px;
  /* background-color: rgb(45, 42, 59); */
  /* padding: 10px 5px 0 5px; */
  margin: 10px 0 0 10px;
  float: left;
  border: 1px solid #dddddd;
}
.lielietop {
  width: 100%;
  height: 81px;
  background-color: #f5f5f5;
  padding: 10px;
  border-bottom: 1px solid #dddddd;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lieliebottom {
  width: 100%;
  height: 69%;
  background-color: #fff;
  padding: 5px;
  overflow: hidden;
}

.toptime {
  font-size: 12px;
}
.toptitle {
  overflow: hidden;
  font-family: "Microsoft YaHei";
}
.red {
  /* backgroundColor: red; */
  background-color: #337ab7;
  color: #fff;
  font-size: 10px;
}

.green {
  background-color: #5cb85c;
  color: #fff;
  font-size: 10px;
}
.topaddress {
  background-color: #777777;
  color: #fff;
  font-size: 10px;
  text-align: center;
}
.el-popover__reference {
  font-size: 12px;
  width: 100%;
  height: 100%;
  /* background-color: #337ab7; */
}
.imgdiv {
  width: 263px;
  height: 263px;
  margin-top: -40px;
  border: 0px solid;
}
.imgdiv img {
  width: 263px;
  /* height: 263px;/ */
  border: none;
}
.titlediv {
  overflow: hidden;
}
.pagination {
  background-color: #337ab7;
  position: absolute;
  bottom: 0px;
  left: 46%;
  margin-bottom: 20px;
}
.bottom-dd {
  width: 100%;
  height: 100px;
  background-color: #2e2e2e;
  padding: 20px 0;
  /* margin-top: 20px; */
}
.data-v-4b1b1569{
  padding: 1px;
}
.col-sm-2{
  margin-left: 3px;
}
.col-sm-4{
  margin-left: 5px;
}
.jiansuo{
  width: 71px;
  height: 34px;
}
.red[data-v-4b1b1569]{
  display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.addressleble{
  display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.xinzimoney{
  display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.label {
  padding: 4px;
}
</style>  